<template>
  <div style="display: flex; justify-content: flex-start; align-items: center">
    <div>用户ID</div>
    <el-input style="width: 180px; margin-left: 10px" v-model="userId" placeholder="Please Input" />
    <el-button style="margin-left: 10px" :icon="Search" type="success" @click="queryResume">查询</el-button>
    <el-button style="margin-left: 10px" :icon="Search" type="success" @click="registerId">注册ID</el-button>
  </div>
  <div id="resumeContent" style="max-width: 595px; margin-top: 20px">
    <h3 style="text-align: center">Resume</h3>
    <el-descriptions title="个人信息" :column="2" border>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <user />
            </el-icon>
            姓名
          </div>
        </template>
        <el-input v-if="!isPrint" v-model="resumeData.data.userName" size="default" placeholder="Please Input" />
        <div v-else>{{ resumeData.data.userName }}</div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <user />
            </el-icon>
            照片
          </div>
        </template>
        <PhotoAvatar :avatarId="userId" :avatar="resumeData.data.avatar" @clearAvatar="clearAvatar" @editAvatar="editAvatar"></PhotoAvatar>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <User />
            </el-icon>
            性别
          </div>
        </template>
        <el-select v-if="!isPrint" v-model="resumeData.data.gender" placeholder="Select">
          <el-option label="男" value="1" />
          <el-option label="女" value="2" />
        </el-select>
        <div v-else>{{ resumeData.data.gender }}</div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <User />
            </el-icon>
            年龄
          </div>
        </template>
        <el-input v-if="!isPrint" v-model="resumeData.data.age" size="default" placeholder="Please Input" />
        <div v-else>{{ resumeData.data.age }}</div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Location />
            </el-icon>
            籍贯
          </div>
        </template>
        <el-input v-if="!isPrint" v-model="resumeData.data.native" size="default" placeholder="Please Input" />
        <div v-else>{{ resumeData.data.native }}</div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Iphone />
            </el-icon>
            电话
          </div>
        </template>
        <el-input v-if="!isPrint" v-model="resumeData.data.tel" size="default" placeholder="Please Input" />
        <div v-else>{{ resumeData.data.tel }}</div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Message />
            </el-icon>
            邮箱
          </div>
        </template>
        <el-input v-if="!isPrint" v-model="resumeData.data.emailAdress" size="default" placeholder="Please Input" />
        <div v-else>{{ resumeData.data.emailAdress }}</div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Timer />
            </el-icon>
            工作年限
          </div>
        </template>
        <el-input v-if="!isPrint" v-model="resumeData.data.serviceYears" size="default" placeholder="Please Input" />
        <div v-else>{{ resumeData.data.serviceYears }}</div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <office-building />
            </el-icon>
            求职意向
          </div>
        </template>
        <el-input v-if="!isPrint" v-model="resumeData.data.jobIntention" size="default" placeholder="Please Input" />
        <div v-else>{{ resumeData.data.jobIntention }}</div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Location />
            </el-icon>
            期望城市
          </div>
        </template>
        <el-input v-if="!isPrint" v-model="resumeData.data.desiredCity" size="default" placeholder="Please Input" />
        <div v-else>{{ resumeData.data.desiredCity }}</div>
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions direction="vertical" :column="1" border>
      <el-descriptions-item label="个人优势">
        <el-input v-if="!isPrint" v-model="resumeData.data.personVerit" :rows="2" type="textarea" class="tagInput"
          :autosize="true" placeholder="Please input" />
        <div v-else v-html="resumeData.data.personVerit.replace(/\n/g, '<br>')"></div>
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions title="工作经历" direction="vertical" :column="1" border>
      <el-descriptions-item v-for="(item, index) in resumeData.data.workerExp" :key="index"
        :label="'EXPERIENCE  ' + (index + 1)">
        <div class="company">
          <div class="cName">
            <el-input v-if="!isPrint" v-model="item.cName" size="default" placeholder="任职企业" />
            <div v-else>{{ item.cName }}</div>
          </div>
          <div class="cProfession">
            <el-input v-if="!isPrint" v-model="item.cProfession" size="default" placeholder="任职岗位" />
            <div v-else>{{ item.cProfession }}</div>
          </div>
          <div class="cTime">
            <el-input v-if="!isPrint" v-model="item.cTime" size="default" placeholder="任职时间" />
            <div v-else>{{ item.cTime }}</div>
          </div>
        </div>
        <div class="jobContent">
          <h4>内容：</h4>
          <el-input v-if="!isPrint" v-model="item.workContent" type="textarea" class="tagInput"
            :autosize="{ minRows: 4, maxRows: 8 }" placeholder="Please input" />
          <div v-else v-html="item.workContent.replace(/\n/g, '<br>')"></div>
        </div>
        <div class="jobPerformance">
          <h4>业绩：</h4>
          <el-input v-if="!isPrint" v-model="item.workGrade" type="textarea" class="tagInput"
            :autosize="{ minRows: 4, maxRows: 8 }" placeholder="Please input" />
          <div v-else v-html="item.workGrade.replace(/\n/g, '<br>')"></div>
        </div>
        <div v-if="!isPrint" style="padding: 10px 4px">
          <el-button :icon="Delete" size="small" v-if="resumeData.data.workerExp.length > 1" type="danger"
            @click="delWorkExp(item, index)">删除</el-button>
          <el-button :icon="DocumentAdd" size="small" v-if="index + 1 === resumeData.data.workerExp.length"
            type="success" @click="addWorkExp">新增</el-button>
        </div>
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions title="项目经历" direction="vertical" :column="1" border>
      <el-descriptions-item v-for="(item, index) in resumeData.data.projectExp" :key="index"
        :label="'PROJECT  ' + (index + 1)">
        <div class="project">
          <div class="pName">
            <el-input v-if="!isPrint" style="width: 300px" v-model="item.projectName" size="default"
              placeholder="项目名称" />
            <div v-else>{{ item.projectName }}</div>
          </div>
          <div class="proPosition">
            <el-input v-if="!isPrint" v-model="item.projectPost" size="default" placeholder="项目岗位" />
            <div v-else>{{ item.projectPost }}</div>
          </div>
          <div class="pTime">
            <el-input v-if="!isPrint" v-model="item.projectTime" size="default" placeholder="项目时间" />
            <div v-else>{{ item.projectTime }}</div>
          </div>
        </div>
        <div class="jobContent">
          <h4>项目介绍：</h4>
          <el-input v-if="!isPrint" v-model="item.projectTopic" type="textarea" class="tagInput"
            :autosize="{ minRows: 4, maxRows: 8 }" placeholder="Please input" />
          <div v-else v-html="item.projectTopic.replace(/\n/g, '<br>')"></div>
        </div>
        <div class="jobContent">
          <h4>项目要点：</h4>
          <el-input v-if="!isPrint" v-model="item.projectContent" type="textarea" class="tagInput"
            :autosize="{ minRows: 4, maxRows: 8 }" placeholder="Please input" />
          <div v-else v-html="item.projectContent.replace(/\n/g, '<br>')"></div>
        </div>
        <div class="projectTag">
          <div class="tagText">技术标签：</div>
          <el-input v-if="!isPrint" type="textarea" class="tagInput" v-model="item.skillTags"
            :autosize="{ minRows: 1, maxRows: 3 }" size="default" placeholder="Please Input" />
          <span v-else>{{ item.skillTags }}</span>
        </div>
        <div v-if="!isPrint" style="padding: 10px 4px">
          <el-button :icon="Delete" size="small" v-if="resumeData.data.projectExp.length > 1" type="danger"
            @click="delProjectExp(item, index)">删除</el-button>
          <el-button :icon="DocumentAdd" size="small" v-if="index + 1 === resumeData.data.projectExp.length"
            type="success" @click="addProjectExp">新增</el-button>
        </div>
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions direction="vertical" border>
      <el-descriptions-item label="教育经历">
        <div class="school">
          <div class="schoolName">
            <el-input v-if="!isPrint" v-model="resumeData.data.schoolName" size="default" placeholder="学校名称" />
            <div v-else>{{ resumeData.data.schoolName }}</div>
          </div>
          <div class="schoolFloor">
            <el-input v-if="!isPrint" style="max-width: 140px" v-model="resumeData.data.schoolFloor" size="default"
              placeholder="学校层次" />
            <div v-else>{{ resumeData.data.schoolFloor }}</div>
          </div>
          <div class="major">
            <el-input v-if="!isPrint" v-model="resumeData.data.major" size="default" placeholder="专业方向" />
            <div v-else>{{ resumeData.data.major }}</div>
          </div>
          <div class="studyTime">
            <el-input v-if="!isPrint" style="width: 150px" v-model="resumeData.data.studyTime" size="default"
              placeholder="在校时间" />
            <div v-else>{{ resumeData.data.studyTime }}</div>
          </div>
        </div>
      </el-descriptions-item>
    </el-descriptions>
  </div>
  <el-button style="margin-top: 10px; margin-left: 180px; width: 200px" type="danger"
    @click="submitResume">保存</el-button>
  <el-button style="margin-top: 10px; margin-left: 100px; width: 100px" type="success"
    @click="madePdf">生成PDF</el-button>
</template>

<script setup>
import { reactive, ref } from 'vue'
import {
  Iphone,
  OfficeBuilding,
  User,
  Location,
  Message,
  Timer,
  DocumentAdd,
  Delete,
  Search
} from '@element-plus/icons-vue'
import { getResume, registResumeApi, addResume, addWorkExpApi, delWorkExpApi, addProjextExpApi, delProjextExpApi } from '../../request/resume_api'
import { ElMessage } from 'element-plus'
import jspdf from 'jspdf'
import html2canvas from 'html2canvas'
import PhotoAvatar from '../common/PhotoAvatar.vue'
const userId = ref('')
const isPrint = ref(false)
const resumeData = reactive({
  data: {
    userName: '',
    gender: '',
    age: '',
    avatar: '',
    native: '',
    tel: '',
    emailAdress: '',
    serviceYears: '',
    jobIntention: '',
    desiredCity: '',
    personVerit: '',
    workerExp: [{}],
    projectExp: [{}],
    schoolName: '',
    schoolFloor: '',
    major: '',
    studyTime: ''
  }
})

const queryResume = async () => {
  if (!userId.value) {
    ElMessage({
      message: '用户ID不能为空',
      type: 'warning'
    })
    return
  }
  const res = await getResume({ userId: userId.value })
  if (res.code === 200) { resumeData.data = res.data }
}
const registerId = async () => {
  if (!userId.value) {
    ElMessage({
      message: '用户ID不能为空',
      type: 'warning'
    })
    return
  }
  const res = await registResumeApi({ userId: userId.value })
  if (res.code === 200) {
    ElMessage({
      message: '注册成功，请查询',
      type: 'success'
    })
  }
}
const clearAvatar = () => {
  resumeData.data.avatar = ''
}
const editAvatar = (ars) => {
  resumeData.data.avatar = ars
}
// 项目经历增加和删除
const delProjectExp = async (item, index) => {
  const res = await delProjextExpApi({ userId: userId.value, id: item.id })
  if (res.code === 200) {
    resumeData.data.projectExp.splice(index, 1)
  }
}
const addProjectExp = async () => {
  if (!userId.value) {
    ElMessage({
      message: '用户ID不能为空',
      type: 'warning'
    })
  } else {
    const res = await addProjextExpApi({ projectId: userId.value })
    if (res.code === 200) {
      resumeData.data.projectExp.push({
        id: res.data.id,
        projectId: userId.value,
        projectName: '',
        projectPost: '',
        projectTime: '',
        projectTopic: '',
        projectContent: '',
        skillTags: ''
      })
    }
  }
}
// 工作经历新增、删除
const delWorkExp = async (item, index) => {
  const res = await delWorkExpApi({ userId: userId.value, id: item.id })
  if (res.code === 200) { resumeData.data.workerExp.splice(index, 1) }
}
const addWorkExp = async () => {
  if (!userId.value) {
    ElMessage({
      message: '用户ID不能为空',
      type: 'warning'
    })
  } else {
    const res = await addWorkExpApi({ workId: userId.value })
    if (res.code === 200) {
      resumeData.data.workerExp.push({
        id: res.data.id,
        workId: userId.value,
        cName: '',
        cProfession: '',
        cTime: '',
        workContent: '',
        workGrade: ''
      })
    }
  }
}
// 保存简历
const submitResume = async () => {
  if (userId.value !== '') {
    const res = await addResume({ ...resumeData.data, userId: userId.value })
    if (res.code === 200) {
      queryResume()
    }
    console.log('-----------res--submit', res)
  } else {
    ElMessage({
      message: '保存操作时，用户ID不能为空',
      type: 'warning'
    })
  }
}

// 生成PDF
const madePdf = () => {
  // resumeContent
  isPrint.value = true
  setTimeout(() => {
    const element = document.getElementById('resumeContent') // 要转换为PDF的HTML元素
    html2canvas(element).then((canvas) => {
      const imgData = canvas.toDataURL('image/png')
      // eslint-disable-next-line new-cap
      const pdf = new jspdf({
        orientation: 'portrait',
        unit: 'px',
        format: [canvas.width, canvas.height]
      })
      const imgProps = pdf.getImageProperties(imgData)
      const pdfWidth = pdf.internal.pageSize.getWidth()
      const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width
      pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight)
      pdf.save(resumeData.data.userName + '的个人简历.pdf')
    })
    isPrint.value = false
  }, 0)
}
</script>

<style lang="less" scoped>
.el-descriptions {
  margin-top: 20px;

  .el-icon {
    margin-right: 6px;
  }
}

:v-deep .el-descriptions__title {
  padding-left: 10px;
}

.cell-item {
  display: flex;
  align-items: center;
}

:v-deep .el-descriptions__label {
  width: 120px;
}

.company {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;

  .cName {
    font-weight: 700;
  }

  .cProfession {
    margin-left: 10px;
  }

  .cTime {
    margin-left: 20px;
  }
}

.project {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .pName {
    font-weight: 700;

    input {
      min-width: 300px;
    }
  }

  .proPosition {
    margin-left: 4px;
  }

  .pTime {
    text-align: right;
    margin-left: 4px;
  }
}

.school {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .schoolFloor {
    margin-left: 20px;
  }

  .major {
    margin-left: 20px;
  }

  .studyTime {
    margin-left: 20px;
  }
}

.pTopic {
  margin-top: 10px;
  padding-left: 10px;
}

.jobContent,
.jobPerformance {
  margin-top: 10px;

  .contentlist {
    margin-top: 10px;
  }

  .contentText {
    width: 550px;
    margin-top: 10px;
  }
}

.projectTag {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10px;
  padding-left: 4px;

  .tagText {
    display: inline-block;
    width: 90px;
  }
}

.tagInput {
  // margin-left: 4px;
}
</style>
